<template>
    <div class="app-container">
        <el-button-group style="margin-top: 10px; margin-left: 10px;">
            <el-button @click="save">保存</el-button>
            <el-button @click="back">返回</el-button>
            <el-button @click="callChildMethod">导出</el-button>
        </el-button-group>
        <designer ref="childRef" />
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import designer from '@/components/designer/index.vue'
import { useRouter, useRoute } from 'vue-router'
import { getProcessDefine } from '@/http/processDefine'

const route = useRoute()

const router = useRouter() // 获取 router 实例
// 创建子组件的 ref
const childRef = ref(null)

const save = () => {
    // 打印query参数
    console.log(route.query.id); // Eve

}

onMounted(() => {
    console.log('onMounted')
    getProcessDefine(route.query.id).then(rep => {
        console.log(rep)
        childRef.value.initNewDiagram(rep.data.xml)
    })
})

// 调用子组件方法
const callChildMethod = () => {
    if (childRef.value) {
        childRef.value.exportBpmn()
    }
}
const back = () => {
    router.push("/bpmn/processdefineManage")
}
</script>
